<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/common_style.css" />
		<link rel="stylesheet" type="text/css" href="css/pay.css" />
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<script type="text/javascript" src="js/common_style.js" ></script>
		<script type="text/javascript" src="js/pay.js" ></script>
		<title>确认付款</title>
	</head>
	<body>
		
		<div class="header">
			<div class="top">
				<div class="middle">
					<span>亲，欢迎来到ZU∧NJZ炉具！</span>
					<ul>
						<li><a href="login.html">【登陆】</a></li>
						<li><a href="regin.html">【注册】</a></li>
						<li><a href="user.html">我的ZUANJ<b>v</b></a></li>
						<li><a href="user.html">帮助中心</a></li>
					</ul>
				</div>
			</div>
			<div class="in_the">
				<div class="middle">
					<div class="logo">
						<a href="index.html"><img src="img/logo.png"><b>炉具</b></a>
					</div>
					<div class="my_shopping">
						<a href="shop_success.html">
							<img class="shopping" src="img/gouwu.png">
								我的购物车
							
							<b>0</b>
						</a>
							<ul class="shopping_bar">
								<li>
									<a hidden="">
										<img src="img/gouwu.png"/>
										<span>购物车空了！Go shopping</span>
									</a>
								</li>
							</ul>
					</div>
					<form class="form_alt">
						<input class="text" type="text" />
						<input class="submit" type="submit" value="搜索" />
						<a href="shop_list.html">不锈钢不粘锅</a>
						<a href="shop_list.html">不粘炒锅</a>
						<a href="shop_list.html">爱仕达</a>
						<a href="shop_list.html">锅具</a>
						<a href="shop_list.html">炒锅</a>
						<div class=" key_search">
							<ul>
								<!--<li><a href="">不锈钢不粘锅</a><span>X</span></li>-->
							</ul>
						</div>
					</form>

				</div>
			</div>
			<div class="bottom">
				<div class="middle"> 
					<div class="nav_middle">
					<h1>全部商品分类
					
						
					</h1>
						<div class="nav">
							<ol>
								<li>
									<h2>烹饪锅具</h2>
									<p>
										<a href="shop_list.html">锅具套装</a>
										<a href="shop_list.html">煎锅</a>
										<a href="shop_list.html">炒锅</a>
									</p>
								</li>
								<li>
									<h2>刀剪菜板</h2>
									<p>
										<a href="shop_list.html">刀具套装</a>
										<a href="shop_list.html">菜刀</a>
										<a href="shop_list.html">钻板</a>
									</p>
								</li>
								<li>
									<h2>清洁用品</h2>
									<p>
										<a href="shop_list.html">清洁膏</a>
										<a href="shop_list.html">洗液精</a>
										<a href="shop_list.html">刷子</a>
									</p>
								</li>
								<li>
									<h2>厨房配件</h2>
									<p>
										<a href="shop_list.html">高温铲子</a>
										<a href="shop_list.html">护锅铲</a>
										<a href="shop_list.html">锅铲</a>
									</p>
								</li>
								<li>
									<h2>家用锅炉</h2>
									<p>
										<a href="shop_list.html">奶锅</a>
										<a href="shop_list.html">蒸锅</a>
		
									</p>
								</li>
								<li>
									<h2>炉具</h2>
									<p>
										<a href="shop_list.html">抽烟机</a>
										<a href="shop_list.html">燃气灶</a>
		
									</p>
								</li>
								<li>
									<h2>家电</h2>
									<p>
										<a href="shop_list.html">热水器</a>
										<a href="shop_list.html">冰箱</a>
		
									</p>
								</li>
								<li>
									<h2>电器</h2>
									<p>
										<a href="shop_list.html">电磁炉</a>
										<a href="shop_list.html">电饭煲</a>
									</p>
								</li>
							</ol>
						</div>
					</div>
					<ul>
						<li><a href="index.html">首页</a></li>
						<li><a href="shop_list.html">锅具套装</a></li>
						<li><a href="shop_list.html">炒锅</a></li>
						<li><a href="shop_list.html">煎锅</a></li>
						<li><a href="shop_list.html">奶锅</a></li>
					</ul>
				</div>

				
			</div>
		</div>


		<div class="progress_bar">
			<p></p>
			<b></b>
			<i class="progress_a">1</i>
			<i class="progress_b">2</i>
			<i class="progress_c">3</i>
			<ul>
				<li>我的购物车</li>
				<li class="information">填写核对订单信息</li>
				<li class="successful_order">成功提交订单</li>
			</ul>
		</div>
		
		
		<div class="order_generate">
			<img src="img/duia_03.png">
			<div class="payment">
				<p><i>你的订单已生成，请尽快付款</i></p>
				<p><span>应付金额：</span><i>¥<em>288.00</em></i></p>
				<b>请你在提交订单后<i>72</i>小时内完成支付，或者订单会自动取消</b>
			</div>
		</div>
		
		
		
		<div class="pay_page">
			<div class="terms_payment">
				<h2>您可以选择付款方式</h2>
				<div class="E_currency_pay">
					<h3>网银支付</h3>
					<ul>
						
						<li>
							<label>
								<input type="radio" name="single"/>
								<img src="img/paycc_07.png"/>
							</label>
						</li>
						<li>
							<label>
								<input type="radio" name="single"/>
								<img src="img/paycc_09.png"/>
							</label>
						</li>
						<li>
							<label>
								<input type="radio" name="single"/>
								<img src="img/paycc_11.png"/>
							</label>
						</li>
						<li>
							<label>
								<input type="radio" name="single"/>
								<img src="img/paycc_13.png"/>
							</label>
						</li>
						<li>
							<label>
								<input type="radio" name="single"/>
								<img src="img/paycc_15.png"/>
							</label>
						</li>
						<li>
							<label>
								<input type="radio" name="single"/>
								<img src="img/paycc_22.png"/>
							</label>
						</li>
						<li>
							<label>
								<input type="radio" name="single"/>
								<img src="img/paycc_23.png"/>
							</label>
						</li>
						<li>
							<label>
								<input type="radio" name="single"/>
								<img src="img/paycc_24.png"/>
							</label>
						</li>
						<li>
							<label>
								<input type="radio" name="single"/>
								<img src="img/paycc_25.png"/>
							</label>
						</li>
						<li>
							<label>
								<input type="radio" name="single"/>
								<img src="img/paycc_27.png"/>
							</label>
						</li>
						<li>
							<label>
								<input type="radio" name="single"/>
								<img src="img/paycc_33.png"/>
							</label>
						</li>
						<li>
							<label>
								<input type="radio" name="single"/>
								<img src="img/paycc_34.png"/>
							</label>
						</li>
					</ul>
					
				</div>
				<div class="payment_platform">
					<h3>平台支付</h3>
					<span>
						<label>
							<input type="radio" name="single"/>
							<img src="img/paycc_38.png"/>
						</label>
					</span>
					<span>
						<label>
							<input type="radio" name="single"/>
							<img src="img/paycc_40.png"/>
						</label>
					</span>
				</div>
				<div class="choose_pay">
					<p>
						<label>
							<input type="radio" name="single"/>
							<img src="img/paycc_45.png"/>
						</label>
					</p>
					<span>*** 5148</span>
					<span>储存卡 | 快捷</span>
					<i>支付<em>¥288.00</em>元</i>
				</div>
				
			</div>
			<div class="pay_password">
				<p>
					<img src="img/lvque.png">
					您在安全的环境中，请放心使用！
				</p>
				<span>支付密码：</span>
				
				
				
				
				<div class="content">
			   	 	<div class="box"></div>
				</div>
			
				
				
				
				
				<a href="">忘记密码？</a>
				<i>请输入6位数字支付密码</i>
				<a href="pay_success.html" class="confirm_payment">确认付款</a>
			</div>
		</div>
		
		
		
		
		
		
		
		
		
			
		<div class="copyright">
			<ul>
				<li><a href="">关于我们 |</a></li>
				<li><a href="">联系我们 |</a></li>
				<li><a href="">联系客服 |</a></li>
				<li><a href="">合作招商 |</a></li>
				<li><a href="">营销中心 |</a></li>
				<li><a href="">手机钻技 |</a></li>
				<li><a href="">友情链接|</a></li>
				<li><a href="">销售联盟 |</a></li>
				<li><a href="">钻技社区 |</a></li>
				<li><a href="">风险监测 |</a></li>
				<li><a href="">隐私政策 |</a></li>
				<li><a href="">钻技公益 |</a></li>
			</ul>
			<p>EnglishSite | Contact Us</p>
			<p> 京公网安备 11000002000088号 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-经营性-2014-0008 | 新出发京零 字第大120007号</p>
			<p>互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2014]2148-348号 | 违法和不良信息举报电话：4006561155</p>
			<p>Copyright © 2004-2017 京东JD.com 版权所有 | 消费者维权热线：4006067733 经营证照</p>
			<p>钻技旗下网站：钻技钱包</p>
			<p>
				<a href=""><img src="img/benan.png"></a>
				<a href=""><img src="img/xiny.png"></a>
				<a href=""><img src="img/yixin.png"></a>
				<a href=""><img src="img/chenx.png"></a>
				<a href=""><img src="img/jubao.png"></a>
				<a href=""><img src="img/xiaz.png"></a>
			</p>
		</div>
		
		
		
	</body>



		<script type="text/javascript">
		/*动态生成*/
var box=document.getElementsByClassName("box")[0];
function createDIV(num){
    for(var i=0;i<num;i++){
        var pawDiv=document.createElement("div");
        pawDiv.className="pawDiv";
        box.appendChild(pawDiv);
        var paw=document.createElement("input");
        paw.type="password";
        paw.className="paw";
        paw.maxLength="1";
        paw.readOnly="readonly";
        pawDiv.appendChild(paw);
    }
}
createDIV(6);



var pawDiv=document.getElementsByClassName("pawDiv");
var paw=document.getElementsByClassName("paw");
var pawDivCount=pawDiv.length;
/*设置第一个输入框默认选中*/
pawDiv[0].setAttribute("style","border: 2px solid deepskyblue;");
paw[0].readOnly=false;
paw[0].focus();

var errorPoint=document.getElementsByClassName("errorPoint")[0];
/*绑定pawDiv点击事件*/

function func(){
    for(var i=0;i<pawDivCount;i++){
        pawDiv[i].addEventListener("click",function(){
            pawDivClick(this);
        });
        paw[i].onkeyup=function(event){
            console.log(event.keyCode);
            if(event.keyCode>=48&&event.keyCode<=57){
                /*输入0-9*/
                changeDiv();
                errorPoint.style.display="none";

            }else if(event.keyCode=="8") {
                /*退格回删事件*/
                firstDiv();

            }else if(event.keyCode=="13"){
                /*回车事件*/
                getPassword();

            }else{
                /*输入非0-9*/
                errorPoint.style.display="block";
                this.value="";
            }

        };
    }

}
func();


/*定义pawDiv点击事件*/
var pawDivClick=function(e){
    for(var i=0;i<pawDivCount;i++){
        pawDiv[i].setAttribute("style","border:none");
    }
    e.setAttribute("style","border: 2px solid deepskyblue;");
};


/*定义自动选中下一个输入框事件*/
var changeDiv=function(){
    for(var i=0;i<pawDivCount;i++){
        if(paw[i].value.length=="1"){
            /*处理当前输入框*/
            paw[i].blur();

            /*处理上一个输入框*/
            paw[i+1].focus();
            paw[i+1].readOnly=false;
            pawDivClick(pawDiv[i+1]);
        }
    }
};

/*回删时选中上一个输入框事件*/
var firstDiv=function(){
    for(var i=0;i<pawDivCount;i++){
        console.log(i);
        if(paw[i].value.length=="0"){
            /*处理当前输入框*/
            console.log(i);
            paw[i].blur();

            /*处理上一个输入框*/
            paw[i-1].focus();
            paw[i-1].readOnly=false;
            paw[i-1].value="";
            pawDivClick(pawDiv[i-1]);
            break;
        }
    }
};



/*获取输入密码*/
var getPassword=function(){
    var n="";
    for(var i=0;i<pawDivCount;i++){
        n+=paw[i].value;
    }
    alert(n);
};
var getPasswordBtn=document.getElementsByClassName("getPasswordBtn")[0];

getPasswordBtn.addEventListener("click",getPassword);

/*键盘事件*/
document.onkeyup=function(event){
    if(event.keyCode=="13") {
        /*回车事件*/
        getPassword();
    }
};


	</script>
			
	
</html>
